import React, { Component, Fragment } from "react";
import { RouteComponentProps, withRouter } from "react-router-dom";
import { Typography, Dropdown, Menu, Button, Input } from "antd";
import { withTranslation, WithTranslation } from "react-i18next";
import logo from "../../assets/logo.svg";
import { GlobalOutlined } from "@ant-design/icons";
import styles from "./Header.module.css";
import { RootState } from "../../redux/store";
import { languageAction, AddLanguage } from "../../redux/action";
import { connect } from "react-redux";
import { Dispatch } from "redux";
class Header extends Component<
  RouteComponentProps & WithTranslation & ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps>
> {

  handleMenuClick = (el: any) => {
    if (el.key === "new") {
      this.props.addLanguage("日语", "jp")
    } else {
      this.props.languageChange(el.key)
    }

  };

  menuName = (language: string) => {
    if (language === "zh") {
      return "中文";
    }
    if (language === "en") {
      return "英文";
    }
    if (language === "jp") {
      return "日语";
    }
  };
  render() {
    const { history, t, languageList, language } = this.props;
    const menu = (
      <Menu onClick={this.handleMenuClick}>
        {languageList.map((item: any) => {
          return <Menu.Item key={item.code}>{item.name}</Menu.Item>;
        })}
        <Menu.Item key="new">
          添加新语言
        </Menu.Item>
      </Menu>
    );
    return (
      <Fragment>
        <div className={styles["top-header"]}>
          <div className={styles["top-header-left"]}>
            <Typography.Text style={{ margin: "0" }}>
              {t("header.slogan")}
            </Typography.Text>
            <Dropdown.Button
              style={{ marginLeft: 10 }}
              overlay={menu}
              icon={<GlobalOutlined />}
            >
              {this.menuName(language)}
            </Dropdown.Button>
          </div>
          <div className={styles["top-header-right"]}>
            <Button onClick={() => history.push("register")}>
              {t("header.register")}
            </Button>
            <Button onClick={() => history.push("singIn")}>
              {t("header.signin")}
            </Button>
          </div>
        </div>
        <div className={styles["main-header"]}>
          <span onClick={() => history.push("/")}>
            <img
              src={logo}
              alt="logo"
              className={styles["App-logo"]}
              style={{ cursor: "pointer" }}
            />
            <Typography.Title
              level={3}
              className={styles.title}
              style={{ cursor: "pointer" }}
            >
              {t("header.title")}
            </Typography.Title>
          </span>
          <Input.Search
            placeholder={"请输入旅游目的地、主题、或关键字"}
            className={styles["search-input"]}
          />
        </div>
        <Menu mode={"horizontal"} className={styles["main-menu"]}>
          <Menu.Item key={1}>{t("header.home_page")}</Menu.Item>
          <Menu.Item key={2}>{t("header.weekend")}</Menu.Item>
          <Menu.Item key={3}>{t("header.group")}</Menu.Item>
          <Menu.Item key="4"> {t("header.backpack")} </Menu.Item>
          <Menu.Item key="5"> {t("header.private")} </Menu.Item>
          <Menu.Item key="6"> {t("header.cruise")} </Menu.Item>
          <Menu.Item key="7"> {t("header.hotel")} </Menu.Item>
          <Menu.Item key="8"> {t("header.local")} </Menu.Item>
          <Menu.Item key="9"> {t("header.theme")} </Menu.Item>
          <Menu.Item key="10"> {t("header.custom")} </Menu.Item>
          <Menu.Item key="11"> {t("header.study")} </Menu.Item>
          <Menu.Item key="12"> {t("header.visa")} </Menu.Item>
          <Menu.Item key="13"> {t("header.enterprise")} </Menu.Item>
          <Menu.Item key="14"> {t("header.high_end")} </Menu.Item>
          <Menu.Item key="15"> {t("header.outdoor")} </Menu.Item>
          <Menu.Item key="16"> {t("header.insurance")} </Menu.Item>
        </Menu>
      </Fragment>
    );
  }
}

const mapStateToProps = (state: RootState) => ({
  language: state.languageReducer.language,
  languageList: state.languageReducer.languageList
})

const mapDispatchToProps = (dispatch: Dispatch) => ({
  languageChange: (code: "zh" | "en") => {
    const action = languageAction(code);
    dispatch(action)
  },
  addLanguage: (name: string, code: string) => {
    const action = AddLanguage({ name, code });
    dispatch(action);
  }
})

// export const HeaderClass = connect(mapStateToProps, mapDispatchToProps)(withTranslation()(withRouter(Header)));
